import React from 'react'
import PropTypes from 'prop-types'
import { Layout, Row, Col, Icon, Badge, Menu, Dropdown, Avatar, Popover,Breadcrumb,Popconfirm } from 'antd'
import './index.less'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { withRouter, matchPath } from 'react-router'
import { bindActionCreators } from 'redux'
import { getAllMenu, updateNavPath } from '../../actions/menu'
import { jsonToTreeJson,findMenuByUrl} from "../../utils";

const { Header } = Layout;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

class commonHeader extends React.Component {
  constructor () {
    super()
  }

  handleLogOut = () => {
    const {logout} = this.props
    logout().payload.promise.then(() => {
      this.props.history.replace('/login');
    });
  }

  handleClick = (item) => {
    this.setState({
      current: item.key,
    });

    this.props.updateNavPath(item.keyPath, item.key,item.item.props.index)
    // 这里要注意：setState 是一个异步方法，所以需要操作缓存的当前值
    // this.props.callbackParent(2);
  }

  componentDidMount () {
    this.props.getAllMenu();
  }

  componentWillReceiveProps(nextProps) {
    /* Array.isArray(nextProps.items) && nextProps.items.map((item, i) => {
      if(i == 0){
        this.handleClick({
          key: 'bar_menu'+item.id,
          keyPath: ['bar_menu'+item.id],
          noJump:true
        })
      }
    }); */
  }

  render () {
    let {profile,items,location} = this.props
    let user = profile.user;
    let pathname = location.pathname;
    let selectMenu = findMenuByUrl(items,pathname);
    let treeMenus = jsonToTreeJson(items,'1');

    if(items.length<=0){
      return (<Header style={{ background: '#fff', padding: 0 }}></Header>);
    }
    let current;
    if(selectMenu){
      current = 'bar_menu' + selectMenu.parent.parent.id;
    }
    
    
    // 菜单单位解析器
    const _menuProcess = (nodes, pkey) => {
      return Array.isArray(nodes) && nodes.map((item, i) => {
        return (
          <Menu.Item key={'bar_menu'+item.id}>
            <Icon type={item.icon} />{item.name}
          </Menu.Item>
        )
      });
    }

    const menu = _menuProcess(treeMenus);

    return (
      <Header style={{ background: '#fff', padding: 0 }}>
        <Row type="flex" justify="start" align="middle">
          <Col style={{width:'230px'}}>
            <a href="/#/home" className="ant-logo"></a>
          </Col>
          <Col style={{width:'auto',position:'absolute',left:'230px',right:'280px'}}>
            <Menu
              onClick={this.handleClick}
              selectedKeys={[(this.state!=null && this.state.current?this.state.current:current)]}
              mode="horizontal"
            >
              {menu}
            </Menu>
          </Col>
          <Col style={{height:48 ,borderBottom:'1px solid #e9e9e9',width:'auto',position:'absolute',right:'20px'}}>
            <Breadcrumb style={{height:48,lineHeight:'48px'}}>
              <Breadcrumb.Item href="/#/home">
                <Icon type="home" />
              </Breadcrumb.Item>
              <Breadcrumb.Item href="javascript:void(0)">
                <Icon type="user" />
                <span>帐号:{user?user.loginName:'xxx'}</span>　
                <Icon type="team" />
                <span>所属机构:{user?user.officeName:'xxx'}</span>
              </Breadcrumb.Item>
              <Breadcrumb.Item>
                称呼:{user?user.name:'xxx'}
              </Breadcrumb.Item>
              <Breadcrumb.Item href="javascript:void(0)">
                <Popconfirm title="您是否确认要注销当前账户？" onConfirm={this.handleLogOut} okText="是" cancelText="否">
                  <Icon type="logout"/>注销
                </Popconfirm>
              </Breadcrumb.Item>
            </Breadcrumb>
          </Col>
        </Row>
      </Header>
    )
  }
}

function mapStateToProps(state) {
  return {
    items: state.menu.items
  }
}

function mapDispatchToProps(dispatch) {
  return {
    getAllMenu: bindActionCreators(getAllMenu, dispatch),
    updateNavPath: bindActionCreators(updateNavPath, dispatch)
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(commonHeader))
